<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>品牌大全</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="../utils/flexible.js"></script>
    <link rel="stylesheet" href="../css/brandTitle.css">
</head>
<body>
    <header>
        <button>返回</button>
        <img src="../images/header_logo.png" alt="">
        <img src="../images/header_app.png" alt="">
    </header>
    <div class="search">
        <input type="text" placeholder="请输入你想比较的商品">
        <p>搜索</p>
    </div>
    
    <!-- 导航nav -->
    <div class="nav">
        <div class="left">
            <a href="../index.html">首页></a>
            <a href="#">全部分类></a>
        </div>
    </div>
    
    <!-- 热门排行 -->
    <p class="paihang">热门品牌排行</p>

    <!-- 列表(大标题) -->
    <ul class="ulall">

    </ul>




    <!-- 底部 -->
    <footer>
        <ul>
            <li>登录</li>
            <li>注册</li>
            <li class="returntop">返回顶部</li>
        </ul>
        <p>
            手机APP下载慢慢买手机版-掌上比价平台<br>
            m.manmanbuy.com
        </p>
    </footer>
</body>
</html>
<script>
    // 返回上一级
    let bn=document.querySelector('button');
    bn.addEventListener('click',function(){
        history.go(-1);
    })

    // 标题函数
    function render1(data=[]){
        let html=''
        data.forEach(item=>{
            html+=`
                <li>
                    <div class='shang'>
                        ${item.brandTitle}
                        <p>▼</p>
                    </div>
                    <ul class='xia'></ul>
                </li>
            `
        })
        $('.ulall').html(html)

        //获取li,把大标题对应的列表加到标题下面
        let divs=document.querySelectorAll('.ulall li .xia');
        let arr=[];
        for(var i=0;i<53;i++){
            
            $.ajax({
                url:'http://chst.vip:1234/api/getbrand',
                data:{
                    brandtitleid:i
                }
            })
                .then(res=>{
                    // console.log('列表数据',res);
                    data=res.result;
                    let html=''
                    data.forEach(item=>{
                        html+=`
                            <li brandid=${item.brandId} title=${item.brandName}>
                                <p>${item.brandName}</p>
                                <p>${item.brandInfo}</p>
                            </li>
                        `
                        
                    })
                    arr.push(html)
                    for(var j=0;j<arr.length;j++){
                        divs[j].innerHTML=arr[j];
                    }
                })
        }
        
        // 给大标题注册事件
        let on=0;
        $('.shang').click(function(){
            if(!on){
                // console.log(6666);
                $(this).next().find('li').css({
                    display: 'block'
                }) 
                $(this).parent().siblings().find('li').css({
                    display: 'none'
                })
                on=!on
            }else{
                $(this).next().find('li').css({
                    display: 'none'
                })
                on=!on
            }
        })

        // 通过点击小列表获取所有小li的id，通过ajax获取数据
        $('.xia').on('click','li',function(){
            let brandid=$(this).attr('brandid');
            let title=$(this).attr('title')
            location.href=`./brand.html?brandid=${brandid}&title=${title}`
        })
    }




    // 通过ajax获取标题数据
    $.ajax({
        url:'http://chst.vip:1234/api/getbrandtitle'
    }).then(res=>{
            console.log('大标题数据',res);
            render1(res.result)
            
        })



    // 返回顶部
    $('footer .returntop').click(function(e){
        document.documentElement.scrollTop=0;
    })
</script>